import { defineComponent } from 'vue';

/**
 * 聊天项 要求只使用 标签 和 unocss
 * 1. 独占一行
 * 2. 通过props的mine属性判断是否为当前用户，如果是则显示在右边，否则显示在左边
 * 3. 通过props的content属性显示聊天内容
 * 4. 通过props的avatar属性显示头像
 * 5. 头像和聊天内容之间有间隔，间隔大小为10px
 * 6. 头像大小为40px
 * 7. 聊天内容最大宽度为70%
 * 8. 聊天内容最小宽度为30%
 * 9. 聊天内容字体大小为16px
 * 10. 聊天内容字体颜色为#333
 * 11. 聊天内容背景颜色为#f5f5f5
 * 12. 聊天内容边框为1px solid #ccc
 * 13. 聊天内容圆角为5px
 * 14. 聊天内容padding为10px
 * 15. 聊天内容margin为10px
 * 16. 聊天内容最小高度为40px
 * 17. 给聊天框添加before小角
 * 18. 给聊天框添加shadow，使用filter来处理
 */

const ChatItem = defineComponent(
  props => {
    const avatar = (
      <div class="flex-cc items-center w-80px h-80px">
        <img src={props.avatar} class="w-10 h-10 rounded-full" />
      </div>
    );

    const content = (
      <div class={props.mine ? 'flex-1 flex flex-col items-end flex-row-reverse' : 'flex-1 flex flex-col items-start'}>
        <div
          class={
            (props.mine
              ? 'before:right-0 before:translate-x-1/1 before:border-l-gray-200'
              : 'before:left-0 before:translate-x--1/1 before:border-r-gray-200') +
            " font-size-14px relative w-3/4 min-w-1/2 max-w-1/2 bg-gray-200 rounded-lg p-2 m-2 text-#333 shadow-md before:content-[''] before:absolute before:top-1/2 before:translate-y--1/2 before:w-0 before:h-0 before:border-x-8 before:border-y-6 before:border-solid before:border-transparent filter-drop-shadow filter-drop-shadow-md drop-shadow-color-gray-a"
          }
        >
          {props.content}
        </div>
      </div>
    );

    return () => (
      <div class="w-full flex justify-start items-center">{props.mine ? [content, avatar] : [avatar, content]}</div>
    );
  },
  {
    props: {
      mine: {
        type: Boolean,
        default: false
      },
      content: {
        type: String,
        default: ''
      },
      avatar: {
        type: String,
        default: ''
      }
    }
  }
);

export default ChatItem;
